let sectionsComponent = {
    template: `
        <div class="sections page">
            <div class="head">
               <div class="left" @click="back">
                    <span class="iconfont icon-ali-fanhui"></span>
                </div>
                <div class="title">CREATE SESSION</div>
                <div class="right"></div>
            </div>
            <div class="main">
                <div class="record-btn" @click="toCreate">
                    <span>RECORD A SECTION</span>
                </div>
                <div class="list">
                    <div class="section" v-for="(item,i) in sectionList">
                           <img src="sections/zhiwen.png" v-show="item.conformation">
                               <div class="section-controls">
        
                                 <div class="btn move" @click="handleMove(-1,i)" v-show="i!==0">Up</div>
                                 <div class="btn move" @click="handleMove(1,i)" v-show="i!==sectionList.length-1">Down</div>
                                  <div class="btn del" @click="handleDelete(i,item)">Delete</div>
                            </div>
                          <div class="top">
       
                                <div class="label">Name: </div><input type="text" v-model="item.name" @blur="nameChange(item,i)">
                 
               
                        </div>
                        <div class="player">
                            <div class="play-item">
                                <span>Content： </span><audio :src="rootUrl+item.fragmentUrl" controls></audio>
                            </div>
                             <div class="play-item" v-if="item.reminderUrl">
                                <span>Reminder： </span><audio :src="rootUrl+item.reminderUrl" controls></audio>
                            </div>
                        </div>
       
                    </div>
                </div>
            </div>
        <div class="controls" v-show="sectionList.length">
                <div class="btn" v-for="btn in btnList" @click="controlHandle(btn)">
                   <div> {{btn.value}}</div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            btnList: [
                {
                    name: 'preview',
                    value: 'Preview'
                },
                {
                    name: 'save',
                    value: 'Save'
                },
                {
                    name: 'describe',
                    value: 'Describe'
                }
            ],
            sectionList: [],
            rootUrl:rootUrl
        }

    },
    computed: {},
    watch: {},
    mounted() {
        section.getList({
            sessionId: this.$route.query.sessionId
        }).then((result)=>{
            sectionFlow.getList(this.$route.query.sessionId).then((sortList)=>{
                let sectionList = []
                if(sortList.length){
                    sortList.forEach((sort,index)=>{
                        if(index===0){
                            sectionList.push(result.find((item)=>item.id === sort.sectionId))
                        }
                        sectionList.push(result.find((item)=>item.id === sort.nextId))
                    })
                } else {
                    sectionList = result
                }

                this.sectionList = sectionList
            })
        })
    },
    activated() {

    },
    methods: {
        nameChange(item,i){
            section.update({
                id: item.id,
                name: item.name || 'Section-'+i
            }).then((r)=>{
                this.$router.replace({
                    name: 'sections',
                    query:{
                        sessionId: this.$route.query.sessionId
                    }
                })
            })
        },
        handleDelete(i,item){
            section.delete(item.id).then(()=>{
                this.sectionList.splice(i,1)
            })
        },
        controlHandle(item){
            switch (item.name){
                case 'save':
                    this.$message.success('save successful!')
                    // this.$router.back()
                    break
                case 'preview':

                        this.$router.push({
                            name: 'detail',
                            query:{
                                type: 'preview',
                                sessionId: this.$route.query.sessionId
                            }
                        })
                    break
                case 'describe':
                        this.$router.push({
                            name: 'description',
                            query:{
                                sessionId: this.$route.query.sessionId
                            }
                        })
                    break
            }
        },
        back(){
          this.$router.back()
        },
        toCreate(){
            section.body = {
                sessionId: Number(this.$route.query.sessionId),
                name: 'Section-' + parseTime(new Date())
            }

            this.$router.push({
                name: 'recorder',
                query:{
                    sessionId: this.$route.query.sessionId
                }
            })
        },
        handleMove(type,i){
            let sectionList = this.sectionList
            let temp = sectionList[i]
            let next = sectionList[i + type]
            if(type<0){
                this.sectionList.splice(i+type,2,temp,next)
            } else {
                this.sectionList.splice(i,2,next,temp)
            }
        }
    },
    components: {},
    beforeRouteLeave(to, from, next) {
        let sortList = []
        for(let i = 0; i < this.sectionList.length;i++){
            let item = this.sectionList[i]
            if(this.sectionList[i+1]){
                let next = this.sectionList[i+1]
                sortList.push({
                    sectionId: item.id,
                    nextId: next.id,
                    type: 'normal'
                })
            }
        }
        sectionFlow.put(this.$route.query.sessionId,sortList)
        section.bodys = [...this.sectionList]
        next();
    }
}


